<template>
  <div>
    <el-container>
      <!-- 左侧导航栏 -->
      <el-aside width="auto" background-color="#545c64">
        <CommonAside></CommonAside>
      </el-aside>

      <!-- 右侧主体区域 -->
      <el-container>
        <!-- 头部 -->
        <el-header>
          <CommonHead></CommonHead>
        </el-header>

        <!-- tag路由标签 -->
        <CommonTag></CommonTag>

        <!-- 内容区域 -->
        <el-main>
          <!-- 子路由出口 -->
          <keep-alive :include="tags">
            <router-view></router-view>
          </keep-alive>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import CommonAside from '../Components/CommonAside.vue'
import CommonHead from '../Components/CommonHead.vue'
import CommonTag from '../Components/CommonTag.vue'

export default {
  name: 'Main',
  components: { CommonAside, CommonHead, CommonTag },
  data () {
    return {
      tags: this.$store.state.tab.tabList.map((item) => item.name).join(',')
    }
  }
}
</script>

<style>
::-webkit-scrollbar {
  width: 10px !important;
}
</style>
<style lang="less" scoped>
.el-header {
  padding: 0;
}

/deep/ .el-main {
  height: 5px;
  overflow: auto;
}
</style>
